<template>
    <div class="product-detail">
        <product-nav />
        <div
            class="loading"
            v-if="product.loading"></div>
        <product-un-find
            v-else-if="(!product.detail) || product.detail.status === 'deleted'"
            :emptyText="$t('gai-shang-pin-yi-shan-chu')" />
        <product-un-find
            v-else-if="(product.detail && product.detail.status !== 'onTheShelf' ) "
            :emptyText="$t('gai-shang-pin-yi-xia-jia')" />
        <product-show-detail
            v-else
            :product="product">
        </product-show-detail>
        <div
            class="product-qrcode"
            v-if="qrcode_img">
            <div class="wechat-qrcode">
                <span class="line-left"></span>
                <span> {{ $t('guan-zhu-gong-zhong-hao') }} </span>
                <span class="line-right"></span>
            </div>
            <div class="qrcode-img">
                <img
                    :src="qrcode_img"
                    alt="">
            </div>
        </div>
    </div>
</template>

<script>
import {
    computed,
    onMounted,
    watch
} from '@vue/runtime-core';
import ProductNav from './common/ProductNav.vue';
import {
    useProductSetup
} from '@/setup/product/ProductSetup';
import {
    useRoute
} from 'vue-router';
import ProductUnFind from './common/productUnFind.vue';
import ProductShowDetail from './common/productShowDetail.vue';

export default {
    components: {
        ProductNav,
        ProductUnFind,
        ProductShowDetail
    },
    setup () {
        const route = useRoute();
        const {
            getProductDetail,
            product,
            productmanual,
            getProductConfig
        } = useProductSetup();

        const qrcode_img = computed(() => {
            return productmanual.config.officialcount && productmanual.config.officialcount[0]?.fileurl;
        });
        const setPageTitle = (title) => {
            document.title = title;
        };
        onMounted(() => {
            const productid = route.query.productid;
            getProductDetail(productid, () => {
                setPageTitle(product.detail.name);
            });
            getProductConfig();
        });
        watch(route.query.productid, () => {
            const productid = route.query.productid;
            getProductDetail(productid, () => {
                setPageTitle(product.detail.name);
            });
        });

        return {
            product,
            productmanual,
            qrcode_img
        };
    }
};

</script>

<style lang="scss" scoped>
    .product-detail {
        padding-top: 44px;
        background: #fff;

        .product-qrcode {
            text-align: center;
            padding-bottom: 20px;
        }

        .wechat-qrcode {
            .line-left {
                width: 32px;
                height: 1px;
                background: rgba(0, 0, 0, 0.40);
                display: inline-block;
                margin-right: 10px;
            }

            .line-right {
                width: 32px;
                height: 1px;
                background: rgba(0, 0, 0, 0.40);
                display: inline-block;
                margin-left: 10px;
            }

            display: flex;
            font-size: 14px;
            padding: 15px 0 10px;
            align-items: center;
            justify-content: center;
        }

        .qrcode-img {
            img {
                width: 140px;
                height: 140px;
            }
        }
    }

</style>
